<template>
  <div id="loading-wrap2">
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span>合同信息</span>
      </div>
      <div>
        <div style="display: flex; margin-bottom: 10px;">
          <div class="label">合同图片</div>
          <div class="images">
            <el-image v-for="(item, index) in images" :key="index" :src="item.url" style="width: 100px; height: 100px" :preview-src-list="srcList">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </div>
        </div>
        <div style="display: flex; margin-bottom: 10px;">
          <div class="label">面签视频</div>
          <div class="images">
            <video v-for="(item, index) in videos" :key="index" controls style="width: 300px; height: 200px">
              <source :src="item" type="video/mp4">
            </video>
          </div>
        </div>
        <div style="display: flex; margin-bottom: 10px;">
          <div class="label">合同文件</div>
          <div>
            <el-link type="primary" :href="info.signContract" target="_blank">{{ info.signContract }}</el-link>
          </div>
        </div>
      </div>
    </el-card>
  </div>

</template>
<script>
import request from '@/utils/request'

export default {
  components: {
    // imageBox,
    // VideoBox
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: 0
    },
    curItem: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      activeName: 'first',
      loadingState: {},
      images: [],
      videos: [],
      info: {},
      srcList: [],
      form: {},
      loading: false,
      statusOption: [{ label: '通过', value: 1 }, { label: '驳回', value: 0 }]
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          setTimeout(() => {
            this.getInfo(this.id)
            this.openFullScreen2()
          }, 500)
        } else {
          this.images = []
          this.videos = []
          this.info = {}
          this.srcList = []
        }
      }
    }
  },
  methods: {
    getInfo(id) {
      request({ url: 'system/contract/' + id, method: 'get' }).then(res => {
        if (res.data) {
          const data = res.data
          if (data.image) {
            this.images = JSON.parse(data.image)
            this.srcList = this.images.map(item => item.url)
          }
          if (data.video) {
            this.videos = JSON.parse(data.video)
          }
          this.info = data
        } else {
          this.info = {}
        }
      }).finally(() => {
        this.loadingState.close()
      })
    },
    openFullScreen2() {
      const loading = this.$loading({
        lock: true,
        target: '#loading-wrap2'
      })
      this.loadingState = loading
    }
  }
}
</script>

<style scoped>
.image-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background-color: rgb(246, 247, 250);
}

.images {
  display: flex;
  gap: 30px
}

.label {
  width: 100px;
}
</style>
